/**
 * 管理后台 - 首页 - 左侧边导航栏列表
 * Author: Zeon
 * Date: 2017/8/1
 * Created by Panxsoft.
 */
<style lang="less" rel="stylesheet/less" type="text/less" scoped>
.v-side-menu {

    &.hide-text .layout-text {
        display: none;
    }

    .layout-logo-left{
        width: 90%;
        height: 30px;
        line-height: 30px;
        border-radius: 3px;
        margin: 15px auto;
        text-align: center;
        font-size: 25px;
        color: #fff;
        cursor: pointer;
            img {
                height: 100%;
                vertical-align: sub;
            }
        }
}
</style>
<template>
	<Menu
		:active-name="getSelectedMenu"
		:open-names="getOpenedMenu"
		:accordion="is_accordion"
		:class="{'hide-text': spanLeft < DEFAULT_BIG_SPAN }"
		theme="dark"
		class="v-side-menu"
		width="auto"
		@on-select="routeTo">

		<!-- 侧边 logo -->
		<div
			class="layout-logo-left"
			@click="$emit('home')">
			<img
				src="//beauty-mirror.gz.bcebos.com/web_admin/admin_logo_icon.png"
				alt="">
			{{ getMenuTitle }}
		</div>

		<div
			v-for="( menu , index ) in getMenus"
			:key="index">

			<Menu-item
				v-if="!menu.submenus"
				:name="menu.name"
				:class="menu.key">
				<Icon
					:type="menu.icon"
					:size="iconSize"/>
				<span class="layout-text">{{ menu.text }}</span>
			</Menu-item>

			<Submenu
				v-else
				:name="menu.name">
				<template slot="title">
					<Icon :type="menu.icon"/>
					{{ menu.text }}
				</template>

				<Menu-item
					v-for="( submenu , index ) in menu.submenus"

					:key="index"
					:name="submenu.name"
					:class="submenu.key">
					<Icon
						:type="submenu.icon"
						:size="iconSize"/>

					<span

						class="layout-text">{{ submenu.text }}</span>

				</menu-item >


			</Submenu>

		</div>

	</Menu>
</template>
<script>

// import API_LIST from 'src/API_LIST';

import { mapGetters } from 'vuex';

export default {
	props: {
		spanLeft: {
			type: Number,
			required: true,
			default: 4,
		},
	},

	data() {
		return {
			DEFAULT_BIG_SPAN: 4,
			is_accordion: true,
			permission_nodes: [],
		};
	},
	computed: {

		...mapGetters('menu', [
			'getMenus',
			'getSelectedMenu',
			'getOpenedMenu',
			'getMenuTitle',
		]),

		iconSize() {
			const big_size = 24;
			const small_size = 20;

			return this.spanLeft === this.DEFAULT_BIG_SPAN
				? small_size
				: big_size;
		},

	},

	mounted() {
	},
	methods: {

		/**
         * 路由跳转
         * @param  {string} path {菜单的name，也同样是跳转地址}
         * @return {undefined}
         */
		routeTo(path) {
			this.$router.push({
				path,
			});
		},
	},
};
</script>
